<template>
  <div>
    <t-drawer
      size="50%"
      :visible.sync="visible"
      :footer="false"
      :confirmOnEnter="true"
      :onClose="close"
      class="client-info"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <p class="chevron-left">
            <icon-font name="chevron-left" size="18px"/>
          </p>
          <h3>{{ header }}</h3>
        </div>
      </template>
      <div class="order-info">
        <div class="item-card">
          <div class="title">服务商信息</div>
          <div class="lists">
            <div class="list-item">
              <p>学校代理商:</p>
              <p>小小方</p>
            </div>
            <div class="list-item">
              <p>学校名称:</p>
              <p>贺州学院</p>
            </div>
          </div>
        </div>
        <div class="item-card">
          <div class="title">客户信息</div>
          <div class="lists">
            <div class="list-item">
              <p>姓名:</p>
              <p>小小方</p>
            </div>
            <div class="list-item">
              <p>手机号:</p>
              <p>15888888888</p>
            </div>
            <div class="list-item">
              <p>身份证号:</p>
              <p>459849854156564555</p>
            </div>
          </div>
        </div>
        <div class="item-card">
          <div class="title">证件图片</div>
          <div class="lists">
            <div class="list-item">
              <p>身份证:</p>
              <t-image-viewer v-for="(item, index) in club_card_data" :default-index="index" :images="club_card_data" :closeOnEscKeydown="false">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                    <p class="prod-img2">
                      <img alt="" :src="item"/>
                    </p>
                    <div class="tdesign-demo-image-viewer__ui-image--hover">
                      <span><browse-icon size="1.4em"/> </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
            <div class="list-item">
              <p>学生证:</p>
              <t-image-viewer v-for="(item, index) in club_card_data" :default-index="index" :images="club_card_data" :closeOnEscKeydown="false">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                    <p class="prod-img2">
                      <img alt="" :src="item"/>
                    </p>
                    <div class="tdesign-demo-image-viewer__ui-image--hover">
                      <span><browse-icon size="1.4em"/> </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </div>
        </div>
      </div>

    </t-drawer>
  </div>
</template>

<script>
import {IconFont, BrowseIcon} from "tdesign-icons-vue";

export default {
  name: 'ClientInfo',
  components: { IconFont, BrowseIcon },
  data() {
    return {
      header: '代理商用户信息',
      visible: false,
      club_card_data: [
        'https://bbwrj-1251144292.cos.ap-guangzhou.myqcloud.com/real_verify/user_1145/20241009/83a44a45-ec26-433d-8ab8-773b80a56b05.jpg',
        'https://bbwrj-1251144292.cos.ap-guangzhou.myqcloud.com/real_verify/user_1145/20241009/83a44a45-ec26-433d-8ab8-773b80a56b05.jpg',
        'https://bbwrj-1251144292.cos.ap-guangzhou.myqcloud.com/real_verify/user_1145/20241009/83a44a45-ec26-433d-8ab8-773b80a56b05.jpg'
      ]
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    close() {
      this.visible = false
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .client-info {
  .t-drawer__body {
    position: relative;
    //background-color: rgba(240, 243, 246, 1);
  }
}

.prod-img2 {
  width: 90px;
  height: 90px;
  padding: 8px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #e5e5e5;

  img {
    width: 100%;
    height: 100%;
  }
}

/deep/ .detail-card {
  .t-card__header {
    padding-bottom: 0;
  }
}

.order-info {
  //padding: 0 var(--td-comp-paddingLR-l);
}

.item-card {
  padding: var(--td-comp-paddingTB-xl) 0;
  border-bottom: 1px dashed #e5e5e5;

  &:first-child {
    padding-top: 0;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 16px;
    color: black;
  }

  .lists {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;

    .list-item {
      display: flex;
      align-items: center;
      color: black;

      p:first-child {
        color: #999;
        padding-right: 6px;
      }
    }
  }
}
</style>
